<template>
  <div class="shell">

    <div id="img-box" style="margin-top: 50px;transform: scale(1.1);">
      <img src="@/assets/1.jpg">
    </div>

    <el-form :model="form" label-width="100px"
             :rules="rules" ref="loginForm" style="margin-top: 50px;transform: scale(1.1);">
      <div id="form-body">
        <div id="welcome-lines" style="margin-top: -40px;">
          <div id="w-line-1"><img src="@/assets/icon.png" width="50"></div>
          <div id="w-line-2">北京114挂号系统登录</div>
        </div>

        <div id="input-area" style=" transform: scale(1.5); ">

          <el-form-item label="账号" prop="username" >
            <el-input style="width: 100% " type="text" v-model="form.username"
                      autocomplete="off" size="small"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" style="margin-top: 12px">
            <el-input style="width: 100%" type="password" v-model="form.password"
                      show-password autocomplete="off" size="small" ></el-input>
          </el-form-item>
          <el-form-item label="身份"  style="margin-top: 12px">
            <el-radio-group v-model="loginPermission" >
              <el-radio :value="0" size="small" style="margin-right: 20px">医生</el-radio>
              <el-radio :value="1" size="small">管理员</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div id="submit-button-cvr" style="margin-top: 40px;width:100%;display: flex;justify-content: center">
            <el-button  type="danger" round @click="login" :disabled="confirm_disabled" style="width: 150px;margin-left: 20px">登 录</el-button>
        </div>
      </div>

    </el-form>

  </div>

</template>

<script setup lang="ts">
import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

const loginPermission = ref(0)
const confirm_disabled = ref(false)
const form = ref({})
const loginForm = ref({})
const rules = ref({
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 1, max: 20, message: '用户名在1-20之间', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 1, max: 20, message: '密码在1-20之间', trigger: 'blur'},
  ]
})
const login = ()=>{
  loginForm.value.validate(valid => {
    if (valid) {
      if (loginPermission.value == 0){
        axios.post('doctor/login',form.value).then(res=>{
          if (res.data.code == 200){
            sessionStorage.setItem("token",res.data.data.token)
            sessionStorage.setItem("user",JSON.stringify(res.data.data.doctor))
              router.push({
                path:'/doctor/index',
              })
          }else {
            ElMessage.error(res.data.msg)
          }
        })
      }else {
        axios.post('admin/login',form.value).then(res=>{
          if (res.data.code == 200){
            sessionStorage.setItem("adminToken",res.data.data.token)
            sessionStorage.setItem("user",JSON.stringify(res.data.data.admin))
            if (res.data.data.admin.permission == 0 || res.data.data.admin.permission == 1){
              router.push({
                path:'/admin/index',
              })
            }else {
              router.push({
                path:'/hosadmin/index',
              })
            }
          }else {
            ElMessage.error(res.data.msg)
          }
        })
      }
    } else {
      ElMessage.error('请输入正确的账号和密码')
    }
  })
}
</script>
<style scoped >
* {
  padding: 0;
  margin: 0;
  outline: none;
}
body {
  background: linear-gradient(45deg, #6962cd, #267aa0);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.shell{
  background: linear-gradient(45deg, #6962cd, #267aa0);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
form {
  position: relative;
}

.shell {
  display: flex;
  justify-content: center;
}

form {
  width: 562px;
  height: 520px;
  background-color: #fff;
  box-shadow: 0px 15px 40px #5a35b6;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#img-box {
  width: 330px;
  height: 520px;
}

#img-box img {
  height: 100%;
}

#form-body {
  width: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#welcome-lines {
  width: 100%;
  text-align: center;
  line-height: 1;
}

#w-line-1 {
  display: flex;
  justify-content: center;
}

#w-line-2 {
  color: #9c9c9c;
  font-size: 30px;
  margin-top: 17px;
}

#input-area {
  width: 100%;
  margin-top: 40px;
  box-sizing: border-box;
  padding-right: 60px;
}

.f-inp {
  padding: 13px 25px;
  border: 2px solid #6e6d6d;
  line-height: 1;
  border-radius: 20px;
  margin-bottom: 15px;
}

.f-inp input {
  width: 100%;
  font-size: 14px;
  padding: 0;
  margin: 0;
  border: 0;
}

.f-inp input::placeholder {
  color: #b9b9b9;
}

#submit-button-cvr {
  margin-top: 20px;
}

#submit-button {
  display: block;
  width: 100%;
  color: #fff;
  font-size: 14px;
  margin: 0;
  padding: 14px 40px;
  border: 0;
  background-color: #f5506e;
  border-radius: 25px;
  line-height: 1;
  cursor: pointer;
}

#forgot-pass {
  text-align: center;
  margin-top: 10px;
}

#forgot-pass a {
  color: #868686;
  font-size: 12px;
  text-decoration: none;
  display: inline-block;
  margin-right: 20px; /*字之间空距离 */
}


</style>